<template>
    <container class="json-path">
        <toolbar></toolbar>

        <el-card class="express">
            <el-row type="flex" justify="space-between">
                <el-col :span="19">
                    <el-input class="input" v-model="express" size="small"
                              placeholder="请输入JSONPath表达式"
                              @keydown.native.enter="execClick"></el-input>
                </el-col>
                <el-col class="buttons" :span="5">
                    <el-button type="primary" size="small" @click="execClick">执行</el-button>
                    <el-button type="warning" size="small" @click="formatClick">格式化</el-button>
                    <el-button type="danger" size="small" @click="compressClick">压缩</el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="editor">
            <el-row :gutter="10">
                <el-col :span="result?12:24">
                    <div class="title">
                        <span>JSON</span>
                        <el-button class="button" type="text" icon="el-icon-delete-solid"
                                   @click="source = ''"></el-button>
                    </div>
                    <monaco-editor v-model="source" lang="json" height="75vh"></monaco-editor>
                </el-col>
                <el-col v-show="result" :span="12">
                    <div class="title">
                        <span>RESULT</span>
                        <el-button class="button" type="text" icon="el-icon-delete-solid"
                                   @click="result = ''"></el-button>
                    </div>
                    <monaco-editor v-model="result" lang="json" height="75vh"></monaco-editor>
                </el-col>
            </el-row>
        </el-card>

    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import MonacoEditor from "../../components/editor/MonacoEditor/index";
  import * as jsonpath from "jsonpath";

  /**
   * @author 白雨浓
   * @date 2019/7/8 17:37
   *
   * JsonPath
   **/
  export default {
    name: 'JsonPath',
    components: {MonacoEditor, Toolbar, Container},
    data() {
      return {
        express: '',
        source: '',
        result: ''
      }
    },
    watch: {
      express() {
        this.execClick();
      }
    },
    methods: {
      execClick() {
        try {
          const result = jsonpath.query(JSON.parse(this.source), this.express);
          this.result = JSON.stringify(result, null, 4);
        } catch (e) {
          console.log(e);
        }
      },
      formatClick() {
        try {
          if (this.source) {
            this.source = JSON.stringify(JSON.parse(this.source), null, 4);
          }

          if (this.result) {
            this.result = JSON.stringify(JSON.parse(this.result), null, 4);
          }
        } catch (e) {
          console.log(e);
        }
      },
      compressClick() {
        try {
          if (this.source) {
            this.source = JSON.stringify(JSON.parse(this.source));
          }
        } catch (e) {
          console.log(e);
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .json-path {
    }

    .express {
        margin 20px auto
        width 98%

        .buttons {
            text-align right
        }
    }

    .editor {
        width 98%
        margin 20px auto
    }

    .title {
        height 35px
        line-height 35px

        .button {
            margin-left 10px
        }
    }
</style>
